import { NavigationContext } from '@react-navigation/native'
import { LinearGradient } from 'expo-linear-gradient'
import { useContext } from 'react'
import { StyleSheet, Text, View, Image, Pressable } from 'react-native'
import { flexCol } from '../../assets/style/common'

export default function GuessFavor() {
  const navigation = useContext(NavigationContext)
  function goDetail() {
    navigation?.navigate('CommonGoods')
  }
  return (
    <LinearGradient
      style={listStyles.guessFavor}
      colors={['#FDF9E8', '#FDECCC']}
      start={{ x: 0.5, y: 0.1 }}
      end={{ x: 0.5, y: 1 }}
    >
      <Text style={listStyles.guessTit}>猜你想看更多</Text>
      <Text style={listStyles.guessDesc}>选一下 获得精准推荐</Text>
      <View style={flexCol(listStyles.guessCardWrap)}>
        <View style={listStyles.guessCard}>
          <Pressable style={listStyles.guessBox} onPress={goDetail}>
            <Image
              style={listStyles.guessCover}
              source={require('../../assets/coverImg/goods4.png')}
            />
            <Text style={listStyles.guessCate}>婴儿背包</Text>
          </Pressable>
        </View>
        <View style={listStyles.guessCard}>
          <Pressable style={listStyles.guessBox} onPress={goDetail}>
            <Image
              style={listStyles.guessCover}
              source={require('../../assets/coverImg/goods5.jpg')}
            />
            <Text style={listStyles.guessCate}>夏季短裤</Text>
          </Pressable>
        </View>
        <View style={listStyles.guessCard}>
          <Pressable style={listStyles.guessBox} onPress={goDetail}>
            <Image
              style={listStyles.guessCover}
              source={require('../../assets/coverImg/goods6.jpg')}
            />
            <Text style={listStyles.guessCate}>平板鞋</Text>
          </Pressable>
        </View>
        <View style={listStyles.guessCard}>
          <Pressable style={listStyles.guessBox} onPress={goDetail}>
            <Image
              style={listStyles.guessCover}
              source={require('../../assets/coverImg/goods7.jpg')}
            />
            <Text style={listStyles.guessCate}>运动鞋</Text>
          </Pressable>
        </View>
      </View>
    </LinearGradient>
  )
}

const listStyles = StyleSheet.create({
  guessFavor: {
    borderRadius: 6,
    backgroundColor: '#fff',
    marginBottom: 12,
  },
  guessTit: {
    fontSize: 14,
    color: '#333',
    fontWeight: 'bold',
    paddingHorizontal: 12,
    paddingTop: 12,
    paddingBottom: 4,
  },
  guessDesc: {
    fontSize: 12,
    paddingHorizontal: 12,
    color: '#666',
  },
  guessCardWrap: {
    flexWrap: 'wrap',
    paddingHorizontal: 6,
    paddingBottom: 6,
  },
  guessCard: {
    paddingHorizontal: 6,
    width: '50%',
    marginBottom: 12,
  },
  guessBox: {
    backgroundColor: '#fff',
    borderRadius: 4,
    height: 88,
  },
  guessCover: {
    width: '100%',
    height: 44,
    marginTop: 12,
    resizeMode: 'contain',
  },
  guessCate: {
    color: '#333',
    fontSize: 14,
    textAlign: 'center',
    marginTop: 8,
  },
})
